<template>
    <transition name="fade">
        <div :class="wrapClasses">
            <span :class="iconClasses" v-if="showIcon">
                <slot name="icon"></slot>
            </span>
            <span :class="messageClasses"><slot></slot></span>
            <span :class="descClasses"><slot name="desc"></slot></span>
        </div>
    </transition>
</template>
<script>
const prefixCls = 'v-alert';

export default {
    name: 'vAlert',
    props: {
        type: {
            type: String,
            default: 'info',
            validator(value) {
                return ['success', 'info', 'warning', 'error'].indexOf(value) > -1;
            }
        },
        showIcon: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            desc: false
        };
    },
    computed: {
        wrapClasses() {
            return [
                `${prefixCls}`,
                `${prefixCls}-${this.type}`,
                {
                    [`${prefixCls}-with-icon`]: this.showIcon,
                    [`${prefixCls}-with-desc`]: this.desc
                }
            ];
        },
        messageClasses() {
            return `${prefixCls}-message`;
        },
        descClasses() {
            return `${prefixCls}-desc`;
        },
        iconClasses() {
            return `${prefixCls}-icon`;
        }
    },
    mounted() {
        this.desc = this.$slots.desc !== undefined;
    }
};
</script>
<style scoped lang="less">
.v-alert {
    position: relative;
    padding: 16px 16px 16px 69px;
    border-radius: 4px;
    margin-bottom: 10px;
    color: #515a6e;
    line-height: 1.5;
    border: 1px solid #abdcff;
    background-color: #f0faff;
    box-sizing: border-box;
    &-icon {
        position: absolute;
        top: 50%;
        left: 24px;
        margin-top: -24px;
        font-size: 28px;
        color: #2d8cf0;
    }
    &-message {
        font-size: 16px;
        color: #17233d;
        display: block;
        margin-bottom: 4px;
    }
    &-desc {
        font-size: 14px;
        color: #515a6e;
        line-height: 21px;
        display: none;
        text-align: justify;
    }
    &-with-icon {
        padding: 16px 16px 16px 69px !important;
    }
    &-with-icon &-icon {
        top: 50%;
        left: 24px;
        margin-top: -24px;
        font-size: 28px;
    }
    &-with-desc {
        padding: 16px;
        position: relative;
        border-radius: 4px;
        margin-bottom: 10px;
        color: #515a6e;
        line-height: 1.5;
    }
    &-with-desc &-message {
        font-size: 16px;
        color: #17233d;
        display: block;
        margin-bottom: 4px;
        text-align: left;
    }
    &-with-desc &-desc {
        display: block;
    }
    &-success {
        color: #67c23a;
        background-color: #f0f9eb;
        border-color: #e1f3d8;
    }
    &-success &-icon {
        color: #67c23a;
    }
    &-info {
        border: 1px solid #abdcff;
        background-color: #f0faff;
    }
    &-info &-icon {
        color: #2d8cf0;
    }
    &-warning {
        background-color: #fdf6ec;
        border-color: #faecd8;
    }
    &-warning &-icon {
        color: #f90;
    }
    &-error {
        background-color: #fef0f0;
        border-color: #fde2e2;
    }
    &-error &-icon {
        color: #f56c6c;
    }
}
</style>
